<template>
  <div class="app-container">
    <vaeTable
      :data="list"
      :option="option"
      :page="page"
      :loading="listLoading"
      @pagination="pagination"
      @on-load="onLoad"
    >
    </vaeTable>

    <Dialog :show.sync="show">
      <div class="info" v-if="show">
        <vaeForm :formConfig="option" v-model="form" :type="type"></vaeForm>
      </div>
    </Dialog>
  </div>
</template>


<script>
import { getUserList, getUserInfo } from "@/api/user";
import vaeTable from "@/components/vae-table";   
import Dialog from "@/components/Dialog";
import vaeForm from "@/components/vae-form";
import list from "@/mixin/list";
export default {
  components: { vaeTable, vaeForm, Dialog },
  mixins: [list],
  data() {
    return {
      form: {},
      option: {
        contralWidth: "",
        contralSize: "",
        labelWidth: "120px",
        column: [
          {
            label: "用户名",
            prop: "user_name",
            width: 120,
            type: "input",
          },
          {
            label: "公司",
            prop: "user_compony",
            width: 110,
            type: "input",
          },
          {
            label: "职务",
            prop: "job",
            width: 120,
            type: "input",
          },
          {
            label: "头像",
            prop: "headerImg",
            type: "img",
            width: 60,
          },
          {
            label: "简介",
            prop: "user_brief",
            type: "input",
          },
        ],
      },
      list: null,
      listLoading: true,
    };
  },
  created() {},
  methods: {
    onLoad() {
      this.listLoading = true;
      getUserList(this.query).then((res) => {
        if (res.status == 1) {
          this.list = res.data.data;
          this.page.page = res.data.page.page;
          this.page.limit = res.data.page.pageSize;
          this.page.total = res.data.page.total;
        }
        this.listLoading = false;
      });
    },
    // 查看
    handleLook(u) {
      this.show = true;
      this.type = "info";
      getUserInfo({ id: u.user_id }).then((res) => {
        if (res.status == 1) {
          this.form = res.data;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.avatar {
  width: 60px;
  height: 60px;
  object-fit: cover;
}
</style>